import cz from "@/assets/icons/cz.svg";
import Group1000002132 from "@/assets/icons/Group1000002132.svg";
import Clipboard from "@/assets/icons/Clipboard.svg";
import ar from "@/assets/icons/ar.svg";
import stop from "@/assets/icons/stop.svg";
import edit from "@/assets/icons/edit.svg";
// 渲染dom
export const domData = (tableData) => {
  let dom = `${tableData
    .map((data, key) =>
      data.children
        .map(
          (item, index) =>
            `<tr onmouseleave="enter()" onmouseenter='over(event,${JSON.stringify(
              item.ns_order_no
            )})'>
            <td>
         
           <label  class="${
             index !== 0 ? "ordersCheckbox dNone" : "ordersCheckbox"
           }">
                <input onclick="getIds(event)" type="checkbox" value=${
                  item.ns_order_no
                }  name="hobby" class="${
              index !== 0 ? "all dNone" : "all"
            }"></input>
                <span class="checkmark"></span>
          </label>

            </td>
  

            <td>
            <div class="${index !== 0 ? "tb-orders dNone" : "tb-orders"}" >
                <p>
               <strong
                onclick='onDetailsPage(${JSON.stringify(item.order_name)})'
              class='detailsPage'>${item.order_name}
                         <img class='tb-copy'
              onclick='onCopy(event,${JSON.stringify(item.order_name)})'
              src="${cz}" alt="" srcset="" />
              </strong>
              </p>
              
              <p>
                <span class="p13777">Amount:</span>
                <strong class='p-22214'>${item.price}</strong>
                <span class='p13222'>${item.currency}</span>
              </p>
              <p>
                <span class="p13777">Shipping:</span><strong  class='p-22214'>${
                  item.price
                }</strong>
                <span class='p13222'>${item.currency}</span>
              </p>
              <p><span class="p13777">Order time: </span></p>
              <p>${item.created_at_str}</p>
              </div>
            </td>
            
            <td> 
                 <div class="${index !== 0 ? "tb-store dNone" : "tb-store"}" >
              <img src="${Group1000002132}" alt="" srcset="" />
                <p>${item.province}</p>
              </div>
              </td>

            <td>
                <div class="${
                  index !== 0 ? "tb-address dNone" : "tb-address"
                }" >
                  <p>${item.city}</p>
                  <div class="tb-link"  onclick="onEAditddress(event)">
                  <img src="${Clipboard}" alt="" srcset="" />
                   <p>${item.city}</p>
                  <img class='tb-link-ar' src="${ar}" alt=""  
                   srcset="" />
                  <div></div>
                  </div>
              </div>
          </td>
          <td> 
              <div class="tb-Product">
              <img src="${stop}" alt="" srcset="" />
              <div class="p-text">
                <p class="p-title">
               ${item.ns_order_no}
                </p>
                <p>
                  <!-- SKU: F3Q225-15ml -->
                  <span class="p13777">SKU：</span>
                  <strong>${index}</strong>
                 ${item.currency} 
                </p>
                <p>
                  <span class="p13777">Options：</span>
                  <span class="spanDiv">15ml</span>
                </p>
                <p>
                  <span class="p13777">Price：</span>
                  <strong class='${!index ? "fontC777" : ""}'> ${index}</strong>
                    <span class='${!index ? "fontC777" : ""}'   >  ${
              item.currency
            }  </span>
                </p>
                <p>
                  <span class="p13777">Quantity：</span>
                  <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}   
                </p>
             </div>
          </div>
          </td>

          <td>  
              <div class="tb-productCost">
               <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}   
          </div>
          </td>
          <td>  
              <div class="tb-shipping">
               <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}   
                  <img src="${ar}" alt="" srcset="" class='imgfirstChild'  onclick="onEditBlock(event)" />
                          <div class="tb-editAddress">
                            <div class="address">   ${item.price} </div>
                           <img  onclick="onEditMaterialFlow(event)" src="${edit}" alt="" srcset="" />
                          </div>

          </div>
          </td>
          <td class='tb-position'>
           <div class="tb-total">
          <p class="p-22214">
              <strong class='p-22214'> ${item.price}   </strong>
              <span class='p13222'> ${item.currency} </span>
              
            </p>
            <p class="p13777 line-through">
             ${item.price} 
          ${item.currency}
            </p>
            <p class="p13red">
             ${item.price}
              <span class='p13red'> ${item.currency}</span>
            </p>
          </div>
          </td>
          <tr/>`
        )
        .join("")
    )
    .join("")}`;
  return dom;
};

//处理数据格式转换数组
export const fiterArr = (data) => {
  let tableDataArrNew = [];
  for (var i in data) {
    tableDataArrNew.push(...data[i]);
  }
  // let n = 1;
  // tableDataArrNew.forEach((e) => {
  //   e.index = n++;
  //   e.children = [
  //     {
  //       index1: 21,
  //     },
  //   ];
  // });

  // 数组中descrition相同的对象合并成一个children
  let b = [];
  tableDataArrNew.forEach((item, index) => {
    let flag = true;
    b.forEach((item2, index2) => {
      if (item.ns_order_no === item2.ns_order_no) {
        flag = false;
        b[index2].children.push(item);
      }
    });
    if (flag) {
      b.push({
        ns_order_no: item.ns_order_no,
        children: [item],
        x: index,
      });
    }
  });

  return b;
};

// bt
export const btDom = (id) => {
  let dom = `<div class="jstable-tb">
  <button onclick='onOrder(${JSON.stringify(
    id
  )})' class='jsbTb'>Place an Order</button>
  <button onclick='onRemove(event)' class='jsbTb'>Remove</button>
</div>`;
  return dom;
};

// edit
export const editDom = (id) => {
  let dom = `<div class="editPopover">
              <div class='edit-link'>
                <div class="edit-left p13777">Recipient:</div>
                <div class="p13222">Emily Stehlik</div>
              </div>
              <div class='edit-link'>
              <div class="edit-left p13777">Recipient:</div>
              <div class="p13222">Emily Stehlik</div>
                  </div>
                  <div class='edit-link'>
                  <div class="edit-left p13777">Recipient:</div>
                  <div class="p13222">Emily Stehlik</div>
                </div>
                <div class='edit-link'>
                <div class="edit-left p13777">Recipient:</div>
                <div class="p13222">Emily Stehlik</div>
              </div>
              <div class='edit-link'>
              <div class="edit-left p13777">Recipient:</div>
              <div class="p13222">Emily Stehlik</div>
            </div>
              <div class="p13red">编辑</div>
            </div>`;
  return dom;
};
